<template>
  <div class="recipeDoctorList padding_20">
    <el-select v-model="param.hospitalId"
               placeholder="请选择医院"
               filterable
               remote
               reserve-keyword
               clearable
               :remote-method="(query) => {remoteMethod(query, 'hospital')}"
               :loading="loading"
               class="w-200"
               @change="val=>handleSelect(val, 'hospital')"
               @clear="_getList">
      <el-option v-for="item in hospitalFilterList"
                 :key="item.id"
                 :label="item.name"
                 :value="item.id">
      </el-option>
    </el-select>
    <el-input v-model="param.nickName"
              placeholder="请输入处方医生"
              class="w-200"
              clearable
              @clear="_getList" />
    <el-button type="primary"
               @click="_getList">查 询</el-button>
    <el-button type="primary"
               @click="handleAdd">新 增</el-button>
    <Table :columns="tableCol"
           :data="tableData"
           stripe
           border
           class="mt-20">
      <template slot-scope="{row,index}"
                slot="action">
        <span @click="handleEdit(row)">编辑</span>
        <span @click="handleDel(row)">删除</span>
      </template>
    </Table>
    <page @getList="_getList"
          :pageTotal="pageTotal"
          ref="page"></page>
    <recipeDoctorEdit ref="recipeDoctorEdit"
                      @getList="_getList"></recipeDoctorEdit>
  </div>
</template>

<script>
  import Page from '@/base/page/page'
  import RecipeDoctorEdit from './recipeDoctorEdit'
  import { mapGetters } from 'vuex'
  export default {
    name: "recipeDoctorList",
    data () {
      return {
        tableCol: [
          {
            type: 'index2',
            title: '',
            width: 60,
            render: (h, params) => {
              return h('span', params.index + (this.page.pageIndex) * this.page.pageSize + 1);
            }
          },
          {
            title: '处方医生',
            key: 'nickName'
          },
          {
            title: '医院名称',
            key: 'hospitalName'
          },
          {
            title: '创建时间',
            key: 'createTime',
            width: 150,
            render: (h, params) => {
              return h('span',
                this.commonFunction.timestampFormat(new Date(params.row.createTime), 'yyyy-MM-dd hh:mm'));
            }
          },
          {
            title: '操作',
            slot: 'action',
            align: 'center'
          }
        ],
        tableData: [],
        pageTotal: 0,       //总条数
        hospitalList: [],
        hospitalFilterList: [],
        loading: false,
        param: {
          hospitalId: '',
          nickName: ''
        }
      }
    },
    created () {
      this._getList();
    },
    methods: {
      // 远程搜索
      remoteMethod (query, type) {
        if (query !== '') {
          let _this = this;
          if (query) {
            if (type === 'hospital') {
              _this.loading = true; // 锁住
              this.post(this.api.searchHospital, {
                pageStart: 0,
                pageSize: 20,
                name: query
              }).then(res => {
                if (res.data.code === '200') {
                  _this.loading = false;
                  _this.hospitalList = res.data.object;
                }
              })
              setTimeout(() => {
                _this.loading = false;
                _this.hospitalFilterList = _this.hospitalList.filter(item => item.name.indexOf(query) > -1);
              }, 200);
            }

          } else {
            if (type === 'hospital') {
              this.hospitalFilterList = [];
            }
          }
        }
      },
      handleSelect (item, type) {
        if (type === 'hospital') {
          this.param.hospitalId = item;
        }
      },
      handleEdit (row) {
        this.$refs.recipeDoctorEdit.openView(row);
      },
      handleAdd () {
        this.$refs.recipeDoctorEdit.openView();
      },
      handleDel (row) {
        this.$confirm('您确认删除该处方医生？')
          .then(_ => {
            this.post(this.api.recipeDoctorDel.url, {
              id: row.id
            }).then(res => {
              if (res.data.code === '200') {
                this.$message.success('删除成功');
                this._getList();
              }
            })
          })
          .catch(_ => { });
      },
      _getList () {
        this.post(this.api.recipeDoctorList.url, this.param).then(res => {
          if (res.data.code === '200') {
            this.tableData = res.data.object;
            this.pageTotal = res.data.totalNum;
          }
        })
      }
    },
    computed: {
      ...mapGetters([
        'page'
      ])
    },
    components: {
      Page,
      RecipeDoctorEdit
    }
  }
</script>

<style lang="scss" scoped>
</style>
